<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>父子组件间传值</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<counter :count="3" @inc='handleIncrease'></counter>
			<counter :count="2" @inc='handleIncrease'></counter>
			<div>{{total}}</div>
		</div>
		<script type="text/javascript">
			var counter = {
				/* 子组件接受父组件内容 */
				props: ['count'],
				data: function() {
					return {
						number: this.count
					}
				},
				template: '<div @click="handleClick">{{number}}</div>',
				methods: {
					handleClick: function() {
						/* this.count++; 不要直接改边赋值 */
						this.number += 2;
						/* 子传父 */
						this.$emit('inc', 2);
					}
				}
			}

			var vm = new Vue({
				el: '#app',
				data: {
					total: 5
				},
				components: {
					counter: counter
				},
				methods: {
					/* this.$emit('inc', 1); -> step = 1 */
					handleIncrease: function(step) {
						this.total = this.total + step;
					}
				}
			});
		</script>
	</body>
</html>
